/*eslint-disable*/
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableHighlight, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import { Navigation } from 'react-native-navigation';
import { LoginPage } from '../navigation/index';

const { width, height } = Dimensions.get('window');

const MySwiper = (props) => {
 
  const images = props.images;
  const goLogin = () => {
    Navigation.setRoot(LoginPage)
  }


  return (
    <View style={styles.wrapperView}>
      <Swiper style={styles.wrapper}>
        {
          images.map(item => {
            return (
              <View style={[styles.swiperItem]} key={item.id}>
                <Image style={styles.swiperImg}
                  source={item.img} />
                {
                  item.id === 3 && <TouchableHighlight style={styles.swiperBtn}
                    underlayColor='#F27600' activeOpacity={0.6} onPress={() => {
                      goLogin()
                    }}>
                    {/* <View> */}
                    <Text style={styles.btn}>立即体验</Text>
                    {/* </View> */}
                  </TouchableHighlight>
                }
                
              </View>
            )
          })
        }
      </Swiper>
    </View>
  )
}

export default MySwiper;

const styles = StyleSheet.create({
  wrapperView: {
    flex: 1
  },
  wrapper: {},
  swiperItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  swiperImg: {
    width,
    height,
    zIndex: -1
  },
  swiperBtn: {
    marginTop: 50,
    borderRadius: 20,
    zIndex: 20,
    bottom: 120,
  },
  btn: {
    backgroundColor: 'orange',
    paddingVertical: 10,
    paddingHorizontal: 50,
    borderRadius: 20,
    color: '#fff',
    zIndex: 20
  }
});
